<template>
    <div>
        <!-- <div>优惠卷管理</div> -->
        <div class="search">
            <el-input v-model="name" size="mini" placeholder="请输入内容" style="width: 300px" clearable></el-input>
            <el-select v-model="type" clearable placeholder="请选择" size="mini" style="width: 300px">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="status" clearable placeholder="请选择" size="mini" style="width: 300px">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" size="mini" @click="searchfun"><i class="el-icon-search"></i>查找</el-button>
            <el-button type="primary" size="mini" @click="addfun"><i class="el-icon-plus"></i>添加</el-button>
            <el-button type="primary" size="mini"><i class="el-icon-upload2"></i>导出</el-button>
        </div>
        <div class="table">
            <el-table border :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
                :cell-style="{ fontSize: '12px' }">
                <el-table-column prop="id" label="优惠券ID" sortable width="110" align="center">
                </el-table-column>
                <el-table-column prop="name" label="优惠券名称" width="100" align="center">
                </el-table-column>
                <el-table-column prop="desc" label="介绍" align="center" width="100">
                </el-table-column>
                <el-table-column prop="tag" label="标签" width="100" align="center"></el-table-column>
                <el-table-column prop="min" label="最低消费" width="100" align="center">
                    <template slot-scope="scope">
                        <div>满{{ scope.row.min }}元可用</div>
                    </template>
                </el-table-column>
                <el-table-column prop="discount" label="满减金额" width="100" align="center">
                    <template slot-scope="scope">
                        <div>减免{{ scope.row.discount }}元</div>
                    </template></el-table-column>
                <el-table-column prop="limit" label="每人限领" width="100" align="center"></el-table-column>
                <el-table-column prop="goodsType" label="商品使用范围" width="110" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.goodsType === 0">全场通用</div>
                        <div v-if="scope.row.goodsType === 1">指定分类</div>
                        <div v-if="scope.row.goodsType === 2">指定商品</div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="优惠卷类型" width="100" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type === 0">通用领卷</div>
                        <div v-if="scope.row.type === 1">注册赠卷</div>
                        <div v-if="scope.row.type === 2">兑换码</div>
                    </template>
                </el-table-column>
                <el-table-column prop="total" label="优惠卷数量" width="100" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" width="100" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 0">正常</div>
                        <div v-if="scope.row.status === 1">已过期</div>
                        <div v-if="scope.row.status === 2">已下架</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handlexiangqing(scope.$index, scope.row)">详情</el-button>
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="solt">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <div class="add">
            <el-dialog title="创建" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="优惠卷名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" size="mini" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="介绍" :label-width="formLabelWidth">
                        <el-input v-model="form.desc" autocomplete="off" size="mini" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="标签" :label-width="formLabelWidth">
                        <el-input v-model="form.tag" autocomplete="off" size="mini" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="最低消费" :label-width="formLabelWidth">
                        <el-input v-model="form.min" autocomplete="off" size="mini" style="width: 300px">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="满减金额" :label-width="formLabelWidth">
                        <el-input v-model="form.discount" autocomplete="off" size="mini" style="width: 300px">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="每人限领" :label-width="formLabelWidth">
                        <el-input v-model="form.limit" autocomplete="off" size="mini" style="width: 300px">
                            <template slot="append">张</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="分发类型" :label-width="formLabelWidth">
                        <el-select v-model="form.goodsType" size="mini" placeholder="请选择类型" style="width: 300px">
                            <el-option label="通用领卷" :value="0"></el-option>
                            <el-option label="注册领卷" :value="1"></el-option>
                            <el-option label="兑换码" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="优惠卷数量" :label-width="formLabelWidth">
                        <el-input v-model="form.total" autocomplete="off" size="mini" style="width: 300px">
                            <template slot="append">张</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="有效期" :label-width="formLabelWidth">
                        <div>
                            <el-radio-group v-model="radio1" size="mini">
                                <el-radio-button label="领卷相对天数"></el-radio-button>
                                <el-radio-button label="指定绝对时间"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <div v-if="radio1 === '领卷相对天数'">
                            <el-input v-model="form.days" autocomplete="off" size="mini" style="width: 300px">
                                <template slot="append">天</template>
                            </el-input>
                        </div>
                        <div v-if="radio1 === '指定绝对时间'">
                            <el-date-picker v-model="datevalue" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" size="mini">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="商品限制范围" :label-width="formLabelWidth">
                        <div>
                            <el-radio-group v-model="radio2" size="mini">
                                <el-radio-button :label="0">全场通用</el-radio-button>
                                <el-radio-button :label="1">指定分类</el-radio-button>
                                <el-radio-button :label="2">指定商品</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div v-if="radio2 === 1">
                            <el-cascader v-model="lianjivalue" :options="options3" :props="props" multiple
                                ref="cascader" @change="handleChange" size="mini"></el-cascader>
                            <el-button size="mini" @click="getCheckedNodes">添加</el-button>
                            <el-table :data="lianjitable" style="width: 35%" border :header-cell-style="{
                                color: '#333',
                                fontSize: '12px',
                                padding: '0',
                            }" :cell-style="{ fontSize: '12pex' }">
                                <el-table-column prop="name" label="分类名称" width="150" align="center">
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="danger"
                                            @click="handleDelete1(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div v-if="radio2 === 2">
                            <el-select v-model="xvzevalue" placeholder="请选择" size="mini" @change="handleChange3">
                                <el-option v-for="item in cities" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.value
                                        }}</span>
                                </el-option>
                            </el-select>
                            <el-button size="mini" @click="xvzeadd">添加</el-button>
                            <el-table :data="xvanzetable" style="width: 50%" border :header-cell-style="{
                                color: '#333',
                                fontSize: '12px',
                                padding: '0',
                            }" :cell-style="{ fontSize: '12pex' }">
                                <el-table-column prop="label" label="产品名称" width="150" align="center">
                                </el-table-column>
                                <el-table-column prop="value" label="产品编号" width="100" align="center">
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="danger"
                                            @click="handleDelete2(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {
    youhuigetdata,
    youhuidelete,
    youhuigetlist,
    youhuigetlist1,
    youhuiadd,
} from "@/api/tggl/yhjgl";
export default {
    data() {
        return {
            // 选择器
            cities: [],
            xvzevalue: "",
            selectdata: {},
            xvanzetable: [],
            // 添加表单
            datevalue: [],
            radio1: "领卷相对天数",
            radio2: 0,
            dialogFormVisible: false,
            form: {
                name: "",
                desc: '',
                days: '',
                discount: '',
                goodsType: null,
                limit: '',
                min: '',
                tag: "",
                total: '',
                status
            },
            formLabelWidth: "120px",
            // 联级选择器
            options3: [],
            lianjivalue: null,
            props: {
                value: "value",
                label: "label",
                children: "children",
            },
            // 联级选择器表格
            lianjitable: [],
            // 分页器
            size: 20,
            page: 1,
            total: null,
            // 表格
            tableData: [],
            // 输入框
            name: "",
            // 选择器
            options1: [
                {
                    value: 0,
                    label: "通用领卷",
                },
                {
                    value: 1,
                    label: "注册赠卷",
                },
                {
                    value: 2,
                    label: "兑换码",
                },
            ],
            type: "",
            options2: [
                {
                    value: 0,
                    label: "正常",
                },
                {
                    value: 1,
                    label: "已过期",
                },
                {
                    value: 2,
                    label: "已下架",
                },
            ],
            status: "",
        };
    },
    created() {
        this.getdata();
        this.getlist();
        this.getlist1();
    },
    methods: {
        // 新增提交
        formaddfun() {
            youhuiadd({
                ...form,
                startTime: this.datevalue[0],
                endTime: this.datevalue[1],

            })
        },
        // 选择器删除
        handleDelete2(index, row) {
            console.log(index, row);
            this.xvanzetable.splice(index, 1);
        },
        // 选择器添加
        xvzeadd() {
            console.log(this.xvzevalue);
            if (this.selectdata) {
                this.xvanzetable.push(this.selectdata)
            }
        },
        // 选择器数据处理
        handleChange3(value) {
            const selectedOption = this.cities.find((item) => item.value === value);
            const selectedLabel = selectedOption ? selectedOption.label : '';
            this.selectdata = {
                value: value,
                label: selectedLabel
            }
            console.log(this.selectdata);
        },
        // 选择器获取数据
        getlist1() {
            youhuigetlist1({
                limit: 0,
            })
                .then((res) => {
                    console.log(res);
                    this.cities = res.data.list.map((item) => ({
                        value: item.goodsSn,
                        label: item.name,
                    }));
                    console.log(this.cities);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 联级选择器表格删除
        handleDelete1(index, row) {
            console.log(index, row);
            this.lianjitable.splice(index, 1);
        },
        // 联级选择器添加
        getCheckedNodes() {
            const checkedNodes = this.$refs.cascader.getCheckedNodes();
            console.log(checkedNodes);
            console.log(checkedNodes[0].pathLabels);
            this.lianjitable.push({
                name:
                    checkedNodes[0].pathLabels[0] + ">" + checkedNodes[0].pathLabels[1],
            });
            console.log(this.lianjitable);
            this.lianjivalue = null;
        },
        // 联级选择器事件
        handleChange(value) {
            console.log(value);
        },
        // 联级选择器数据处理函数
        transformData(data) {
            return data.map((item) => {
                const transformedItem = {
                    label: item.name,
                    value: item.id,
                };
                if (item.children && item.children.length > 0) {
                    transformedItem.children = this.transformData(item.children);
                }
                return transformedItem;
            });
        },
        // 联级选择器获取数据
        getlist() {
            youhuigetlist()
                .then((res) => {
                    console.log(res);
                    if (res.errno === 0) {
                        const data = res.data.list;
                        this.options3 = this.transformData(data);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 添加
        addfun() {
            this.dialogFormVisible = true;
        },
        // 查找
        searchfun() {
            this.getdata();
        },
        // 分页器
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.size = val;
            this.getdata();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getdata();
        },
        // 获取初始数据
        getdata() {
            youhuigetdata({
                page: this.page,
                limit: this.size,
                sort: "add_time",
                order: "desc",
                name: this.name,
                type: this.type,
                status: this.status,
            })
                .then((res) => {
                    console.log(res);
                    if (res.errno === 0) {
                        this.tableData = res.data.list;
                        this.total = res.data.total;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 表格操作
        handleEdit(index, row) {
            console.log(index, row);
        },
        handlexiangqing(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    youhuidelete({ ...row })
                        .then((res) => {
                            console.log(res);
                            if (res.errno === 0) {
                                this.$message.success("删除成功！");
                                this.getdata();
                            } else {
                                this.$message.error("删除失败！");
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style scoped>
.el-form-item {
    margin-bottom: 5px;
}

.search {
    margin-top: 20px;
    margin-left: 20px;
}

.table {
    margin-top: 20px;
    margin-left: 20px;
}

.solt {
    margin-top: 20px;
    margin-left: 20px;
}
</style>
